<template>
	<view class="left-box">
		<view class="left-header">
			<span class="header__title">项目</span>
			<view class="button-group">
				<button v-if="menus.length !== 0" class="uni-btn uni-btn-mini" type="primary" size="mini" @click="open">新建项目</button>
			</view>
		</view>
		<view class="left-content">
			<view v-if="loading" class="no-data">
				别着急，数据正在赶来！
			</view>
			<template v-else>
				<uni-data-menu v-if="menus.length !== 0" class="uni-data-menu" :localdata="menus" :unique-opened="true"
					:value="activeUrl" active-text-color="#00A1E0" @select="select">
				</uni-data-menu>
				<view v-else class="no-data">
					<view>
						还没有创建任何项目，赶快新建一个吧
					</view>
					<button class="primary" size="mini" @click="open">新建项目</button>
				</view>
			</template>
		</view>
		<uni-popup ref="popup" :maskClick="false">
			<view class="popup-box">
				<view class="popup-header">创建{{typeText}}</view>
				<view class="popup-content">
					<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="70">
						<uni-forms-item required :label="typeText+'名称'" name="name">
							<uni-easyinput type="text" v-model="formData.name" :placeholder="'输入'+typeText+'名称'" />
						</uni-forms-item>
						<uni-forms-item required :label="typeText+'路径'" name="path">
							<uni-easyinput type="text" v-model="formData.path" :placeholder="'输入'+typeText+'基础路径'" />
						</uni-forms-item>
						<uni-forms-item :label="typeText+'描述'" name="comment">
							<uni-easyinput type="textarea" v-model="formData.comment"
								:placeholder="'输入'+typeText+'描述'" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="popup-footer button-group">
					<button class="info" size="mini" @click="close">取消</button>
					<button class="primary left" size="mini" @click="createProject">创建{{typeText}}</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="dialog" type="dialog">
			<uni-popup-dialog :type="dialog.type" :title="dialog.title" :content="dialog.content"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import rulesData from '@/util/rules/index.js'
	export default {
		props: {
			showLeftWindow: {
				type: Boolean
			}
		},
		data() {
			return {
				userinfo: {},
				activeUrl: '_home',
				formData: {
					name: '',
					path: '',
					comment: ''
				},
				dialogType: 'project',
				apiFormData: {},
				dialog: {
					type: "error",
					content: '',
					title: '提示'
				},
				loading: true,
				rules: rulesData.rules,
				menus: [{
					menu_id: "_home",
					text: '首页',
					type: 'home'
				}]
			}
		},
		watch: {
			showLeftWindow(val) {
				if (val) {
					this.getProject()
				}
			},
			$route: {
				immediate: true,
				handler(newRoute, oldRoute) {
					const {query} = newRoute
					let params = null
					try {
						params = JSON.parse(query.params)
						// 延时保证左页面渲染完毕
						setTimeout(()=>{
							this.activeUrl = params.menu_id
						},1000)
					}catch(e){
						params = null
					}
				}
			},
		},
		computed: {
			typeText() {
				return this.dialogType === 'project' ? '项目' : 'API'
			}
		},
		created(data) {
			// let page = getCurrentPages()
			// let route = page[0].route
			// console.log(route);
			this.getProject()
		},
		mounted() {},
		methods: {
			select(e) {
				if (e.menu_id === 'add') {
					this.dialogType = 'api'
					this.apiFormData = e
					this.formData = {
						name: '',
						path: '',
						comment: ''
					}
					this.$refs.popup.open('center')
					return
				}
				let url = ''
				let page = getCurrentPages()
				if (e.type === 'home') {
					url = '/pages/index/index'
					if (page[0].route === 'pages/index/index') return
				} else {
					url = '/pages/api/api?params='+JSON.stringify(e)
				}

				uni.navigateTo({
					url
				})
			},
			createProject() {
				this.$refs.form.validate().then(res => {
					let project_id = this.apiFormData.project_id || null
					this.$api[`create_${this.dialogType }`]({
						...this.formData,
						project_id
					}).then((res) => {
						const data = res.data
						if (this.activeUrl === '_home' && !project_id) {
							uni.$emit('add-project', data)
						}

						if (project_id) {
							let menusIndex = this.menus.findIndex(v => v.id === data.project_id)
							if(menusIndex !== -1){
								let menus= this.menus[menusIndex]
								let objData = {
									id: data._id,
									project_id: data.project_id,
									paroject_path:data.paroject_path,
									menu_id: data.api_base_path,
									text: data.api_name,
									type: 'api'
								}
								menus.children.push(objData)
								this.$set(this.menus,menusIndex,menus)
								this.$nextTick(()=>{
									this.activeUrl = data.api_base_path
									uni.navigateTo({
										url:'/pages/api/api?params='+JSON.stringify(objData)
									})
								})
							}
							
						} else {
							this.menus.push({
								id: data._id,
								menu_id: data.project_base_path,
								text: data.project_name,
								children: [{
									id: data._id,
									project_id: data._id,
									menu_id: "add",
									text: '新建API',
									type: 'add'
								}]
							})
						}

						this.openDialog(res.desc, 'success')
						this.close()
					}).catch(err => {
						console.log(err);
						this.openDialog(err.desc)
					})
				}).catch(err => {
					console.log(err);
				})

			},
			getProject() {
				this.loading = true
				this.$api.get_project().then(res => {
					let lists = []
					res.lists.forEach(v => {
						const apis = []
						v.apis.forEach(api => {
							apis.push({
								id: api._id,
								project_id: api.project_id,
								project_path: v.project_base_path,
								menu_id: api.api_base_path,
								text: api.api_name,
								type: 'api'
							})
						})
						lists.push({
							id: v._id,
							menu_id: v.project_base_path,
							text: v.project_name,
							children: [{
								id: v._id,
								project_id: v._id,
								menu_id: "add",
								text: '新建API',
								type: 'add'
							}, ...apis]
						})
					})
					this.menus.push(...lists)
					this.loading = false

				}).catch(err => {
					this.loading = false
					console.log(err);
				})
			},
			open() {
				this.dialogType = 'project'
				this.apiFormData = {}
				this.formData = {
					name: '',
					path: '',
					comment: ''
				}
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			openDialog(content = '', type = 'error') {
				this.dialog.title = '提示'
				this.dialog.content = content
				this.dialog.type = type
				this.$refs.dialog.open()
			}
		}
	}
</script>

<style lang="scss">
	.left-box {
		width: 100%;
		height: calc(100vh - 55px);
		border-right: 1px #eee solid;
		box-sizing: border-box;
		background-color: #f9f9f9;

		.left-header {
			flex-shrink: 0;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 15px;
			border-bottom: 1px #eee solid;
			background-color: #FFFFFF;

			&__title {
				font-size: 16px;
				color: #2C405A;
			}
		}

		.left-content {
			height: calc(100% - 55px);
			width: calc(100% + 55px);
			flex: 1;
			box-sizing: border-box;
			overflow-y: scroll;

			.uni-data-menu {
				width: calc(100% - 38px);
			}
		}
	}

	.button-group {
		margin-right: 5px;
	}

	.popup-box {
		width: 500px;
		background-color: #fff;
		border-radius: 5px;

		.popup-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 45px;
			// border-bottom: 1px #eee solid;
			padding-top: 10px;
			font-size: 18px;
			font-weight: bold;
			color: #2C405A;
		}

		.popup-content {
			padding: 15px;
			padding-top: 20px;
		}

		.popup-footer {
			padding: 10px 0;
			padding-bottom: 20px;
			display: flex;
			justify-content: center;

			button {
				margin: 0;

				&.left {
					margin-left: 50px;
				}
			}
		}
	}

	.no-data {
		padding-top: 50px;
		font-size: 14px;
		display: flex;
		align-items: center;
		flex-direction: column;
		color: #999;

		button {
			margin-top: 20px;
		}
	}
</style>
